<template>
  <v-container>
   <div>
     Share
   </div>
   <div>
     这是一条新闻，欢迎在下面评论
   </div>
   <!--div class="text-center">
    <v-btn
      dark
      color="red darken-2"
      @click="snackbar = true"
    >
      Open Snackbar
    </v-btn>

    <v-snackbar
      v-model="snackbar"
      :multi-line="multiLine"
    >
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn
          color="red"
          text
          v-bind="attrs"
          @click="snackbar = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </!--div-->
  <!--评论弹窗>
<div-- data-app="true">
    <v-dialog
      v-model="dialog"
      width="500"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="red lighten-2"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Click M
        </v-btn>
      </template>

      <v-card>
        <v-card-title class="text-h5 grey lighten-2">
          Privacy Policy
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
            I accept
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div-->
  <!--评论保存-->
  <div   data-app="true"
              style="
              display: flex;
              flex-direction: row;
              justify-content: right;
              align-items: center;
              margin-top: 20px;
            "
  >
    
    <v-dialog
      v-model="dialog"
      max-width="600px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          style="
              display: flex;
              flex-direction: row;
              justify-content: right;
              align-items: right;
              
            "
          v-bind="attrs"
          v-on="on"
        >
          评论区
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="text-h5">欢迎留言</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <!--v-col
                cols="12"
                sm="6"
                md="4"
              >
                <v-text-field
                  label="Legal first name*"
                  required
                ></v-text-field>
              </!--v-col>
              <v-col
                cols="12"
                sm="6"
                md="4"
              >
                <v-text-field
                  label="Legal middle name"
                  hint="example of helper text only on focus"
                ></v-text-field>
              </v-col>
              <v-col--
                cols="12"
                sm="6"
                md="4"
              >
                <v-text-field
                  label="Legal last name*"
                  hint="example of persistent helper text"
                  persistent-hint
                  required
                ></v-text-field>
              </v-col-->
              <v-col cols="12">
                <v-text-field
                  label="在此评论"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="在此评论"
                ></v-text-field>
              </v-col>
              <!--增加评论-->
              <!-- <v-menu
                    bottom
                    offset-y
                  >
                    <template v-slot:activator="{ on, attrs }">
                      <v-btn
                        class="ma-2"
                        v-bind="attrs"
                        v-on="on"
                      >
                        A Menu
                      </v-btn>
                    </template>
                    <v-list>
                      <v-list-item
                        v-for="(item, i) in items"
                        :key="i"
                        @click="() => {}"
                      >
                        <v-list-item-title>{{ item.title }}</v-list-item-title>
                      </v-list-item>
                    </v-list>
                  </v-menu> -->



            </v-row>
          </v-container>
          <small>请文明发言</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            Close
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  
  </div>
  <!--点赞点踩-->
  <div>
     <v-row>
      <v-col
        cols="32"
        sm="12"
        md="6"
        offset-md="6"
      >



        <v-btn
            color="blue"
            dark
            style="
            margin-right:20px;
            "
            @click="hidden = !hidden"
        >
          {{ hidden ? '点赞' : '取消点赞' }}
        </v-btn>
        <v-btn

            color="blue"
            dark
            @click="hidden1 = !hidden1"
        >
          {{ hidden1 ? '点踩' : '取消点踩' }}
        </v-btn>

      </v-col>
    </v-row>
  </div>

  

    </v-container>
    
</template>


<script>
  export default {
    name: 'share',

    data:() => ({
      multiLine: true,
      snackbar: false,
      text: `I'm a multi-line snackbar.`,
      dialog: false,
      hidden: true,
      hidden1:true,
    }),
    methods:{

    }

    
  }
</script>
